<template>
    <lightning-card title="MiscRestApiCall" icon-name="custom:custom63">
        <div class="slds-var-m-around_medium">
            <lightning-layout
                vertical-align="end"
                class="slds-var-m-bottom_small"
            >
                <lightning-layout-item flexibility="grow">
                    <lightning-input
                        type="search"
                        onchange={handleSearchKeyChange}
                        label="Search Books"
                        value={searchKey}
                    ></lightning-input>
                </lightning-layout-item>
                <lightning-layout-item class="slds-var-p-left_xx-small">
                    <lightning-button
                        label="Search"
                        onclick={handleSearchClick}
                    ></lightning-button>
                </lightning-layout-item>
            </lightning-layout>
            <template lwc:if={books}>
                <template for:each={books.items} for:item="book">
                    <p key={book.id}>{book.volumeInfo.title}</p>
                </template>
            </template>
            <template lwc:elseif={error}>
                <c-error-panel errors={error}></c-error-panel>
            </template>
            <lightning-spinner
                lwc:if={isLoading}
                alternative-text="Loading records"
            ></lightning-spinner>
        </div>

        <c-view-source source="lwc/miscRestApiCall" slot="footer">
            Call a REST service using the&nbsp;
            <a
                href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API"
                target="_blank"
                >Fetch API</a
            >.
        </c-view-source>
    </lightning-card>
</template>
